import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-virtual-scroll',
  templateUrl: './virtual-scroll.component.html',
  styles: [
    `
      .list-demo-container {
        width: 100%;
        height: 300px;
      }
      .list-demo-avatar {
        position: relative;
        display: inline-block;
        width: 48px;
        height: 48px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        color: #ffffff;
        font-size: 14px;
        line-height: 22px;
        white-space: nowrap;
        text-align: center;
        vertical-align: middle;
        list-style: none;
        border: 1px solid rgba(0, 0, 0, 25%);
        border-radius: 50%;
      }
      .list-demo-avatar > img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      ::ng-deep .list-demo-container.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper {
        max-width: 100%;
      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class VirtualScrollComponent implements OnInit {
  data = [];
  tags = [];

  constructor() {}

  ngOnInit(): void {
    this.data = new Array(500).fill(1).map((_, index) => ({
      key: index,
      title:
        index % 2 === 0
          ? `This is the title of the long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long target`
          : `This is the title of the target`,
      description: `So strongly and metaphysically did I conceive of my situation then, that while earnestly watching his motions.`,
      image: '',
      extra: 'Additional information',
    }));

    this.tags = new Array(3).fill({ value: 'This is tag', label: 'This is tag' });
  }

  getItems() {
    return [
      { id: 'Actions', label: 'Actions' },
      { id: 'Edit', label: 'Edit' },
      { id: 'Open', label: 'Open' },
    ];
  }
}
